<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2022-10-11 13:32:23
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2025-03-24 14:32:21
 * @FilePath: \global-brain\global-brain-admin\src\components\UploadLxq\src\UploadLxq.vue
 * Copyright (c) 2022 by 李天惊 uf_lee@163.com, All Rights Reserved. 
-->
<script setup lang="ts">
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { propTypes } from '@/utils/propTypes'
import { ElUpload } from 'element-plus'
import { Dialog } from '@/components/Dialog'
import type { UploadProps } from 'element-plus'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
import emitter from '@/views/AAA/emitter'
let url: any = ref({
  imageUrl: ''
  // fileUrl: ''
})
const props = defineProps({
  modelValue: propTypes.string.def('')
})
// if (props.modelValue) {
//   url.value.imageUrl = props.modelValue
// }

// watch(
//   () => props.modelValue,
//   (val: string) => {
//     console.log(props.modelValue, 'url.imageUrl')
//     console.log(val, 'props.modelValue')
//     if (val === url.value.imageUrl) return
//     url.value.imageUrl = val
//   }
// )
const emit = defineEmits(['update:modelValue', 'change', 'del', 'modelData'])

const dialog = ref(false)

const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
  if (response.code == '200') {
    url.value.imageUrl = response.data.file_url
    // console.log(url.imageUrl, 'url.imageUrl')
    emit('update:modelValue', response.data.file_url)
    emit('change', response.data)
    emit('modelData', response.data)
  } else {
    ElMessageBox.alert(response.msg, '上传失败')
  }
}
const onDialog = () => {
  dialog.value = true
}
const onDel = () => {
  url.value.imageUrl = []
  emit('update:modelValue', '')
  emit('del', {})
}
let www = ref(false)

emitter.on('orchuan', (a) => {
  if (a == '修改') {
    www.value = false
  } else if (a == '初始') {
    www.value = true
  } else if (a == '取消') {
    www.value = true
  } else if (a == '保存') {
    www.value = true
  }
})
const init = () => {
  if (props.modelValue) {
    url.value.imageUrl = props.modelValue
  }
  // url.value.imageUrl = ''
  // emit('update:modelValue', '')
  // emit('del', {})
}
init()
</script>

<template>
  <div>
    <ElUpload
      class="avatar-uploader"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :action="appStore.getUploadUrl"
      :disabled="www"
    >
      <div v-if="url.imageUrl.length > 0" class="el-upload-list--picture-card">
        <img class="el-upload-list__item-thumbnail avatar" :src="url.imageUrl" alt="" />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview">
            <Icon icon="ep:zoom-in" @click.stop="onDialog" />
          </span>
          <span class="el-upload-list__item-preview">
            <Icon icon="ep:delete" @click.stop="onDel" />
          </span>
        </span>
      </div>
      <!-- <div v-if="url.fileUrl" class="el-upload-list--picture-card"> -->
      <!-- <div v-if="props.modelValue" class="el-upload-list--picture-card">
        <img class="el-upload-list__item-thumbnail avatar" :src="props.modelValue" alt="" />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview">
            <Icon icon="ep:zoom-in" @click.stop="onDialog" />
          </span>
          <span class="el-upload-list__item-preview">
            <Icon icon="ep:delete" @click.stop="onDel" />
          </span>
        </span>
      </div> -->
      <Icon
        v-if="url.imageUrl.length == 0"
        icon="carbon:add"
        class="avatar-uploader-icon"
        :size="28"
      />
    </ElUpload>
    <Dialog v-model="dialog" title="图片展示">
      <img w-full v-if="url.imageUrl" :src="url.imageUrl" alt="Preview Image" />
    </Dialog>
  </div>
</template>
